<template>
	<view>
		<view class="user-panel">
			<view class="user-photo" @tap="chooseUserPhoto">
				<image :src="userPhotoImg" mode="scaleToFill"></image>
			</view>
			<view class="user-info">
				<view class="user-id">{{s_id}}</view>
				<view class="user-nick-name">{{s_name}}</view>
			</view>
		</view>
		<view class="progress-view" >
			<progress :percent="uploadProgress" v-if="uploadProgress!=0&&uploadProgress!=100" show-info stroke-width="2"></progress>
		</view>
		<!--列表选项 -->
		<view class="item-list">
			<navigator open-type="navigate" url="/pages/myInfo/myInfo" class="item" hover-class="item-hover-class">
				<view class="left">
					<image src="../../static/dingdan.png" mode="widthFix"></image>
				</view>
				<view class="right">
					我的信息
				</view>
			</navigator>
			<navigator open-type="navigate" url="/pages/changePwd/changePwd" class="item" hover-class="item-hover-class">
				<view class="left">
					<image src="../../static/mima.png" mode="widthFix"></image>
				</view>
				<view class="right">
					修改密码
				</view>
			</navigator>
			<view class="item" hover-class="item-hover-class" @tap="logOut">
				<view class="left">
					<image src="../../static/logout.png" mode="widthFix"></image>
				</view>
				<view class="right">
					退出登陆
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{mapState,mapGetters} from 'vuex';
	import AppConfig from '../../config/AppConfig.js';
	export default {
		name:"me",
		data(){
			return{
				userPhotoImg:this.$store.state.globaData.userDefaultPhoto,
				uploadProgress:0
			}
		},
		onLoad:function(){
			uni.setNavigationBarTitle({
				title:"我的"
			});
			//获取用户图片
			uni.request({
				url:`${AppConfig.baseUrl}/Stu_info/findPhotoByS_id/${this.s_id}`,
				success:res=>{
					if(res.data.status=="success"){
						if(res.data.data!=""){
							this.userPhotoImg=`${AppConfig.baseUrl}${res.data.data}`;
						}
					}
				}
			})
			
		},
		computed:{
			...mapGetters(["s_id","s_name"])
		},
		methods:{
			chooseUserPhoto(){
				var that=this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success:(res)=>{
						//图片选择成功以后开始上传图片
						this.uploadProgress=0;
						uni.showLoading({
							title:`正在上传图片`
						});
						const uploadTask = uni.uploadFile({
							url:`${AppConfig.baseUrl}/Stu_info/uploadPhoto`,
							filePath:res.tempFilePaths[0],
							name:"s_photo",
							formData:{
								s_id:this.s_id
							},
							success:(res)=>{
								uni.hideLoading();
								var jsonObj={};
								if(typeof res.data==="string"){
									jsonObj=JSON.parse(res.data);
								} 
								else{
									jsonObj=res.data;
								}
								if(jsonObj.status=="success"){
									this.userPhotoImg=`${AppConfig.baseUrl}${jsonObj.data}`;
								}
								else{
									uni.showModal({
										title:'提示',
										content:jsonObj.msg,
										showCancel:false
									});
								}
							},
							fail:function(err){
								uni.hideLoading();
								console.log(JSON.stringify(err));
								uni.showToast({
									title:'图片上传失败....'
								});
							}
						});
						uploadTask.onProgressUpdate(res=>{
							this.uploadProgress=res.progress;
						})
					}
				});
			},
			logOut(){
				uni.showModal({
					title:'系统提示',
					content:'确定要退出登陆吗？',
					confirmText:'我要退出',
					cancelText:'取消',
					success:res=>{
						if(res.confirm){
							uni.clearStorage();
							uni.reLaunch({
								url:'/pages/login/login'
							});
						}	
					}
				})
				
			}
		}
	}
</script>

<style scoped>
.progress-view{
	position: fixed;
	top: 0px;
	width: 100%;
}
.user-panel{
	height: 250px;
	background: radial-gradient(white,#2FA3DF);
	display: flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20px;
	
	
}
.user-photo{
	width: 150px;
	height: 150px;
	border-radius: 75px;
	overflow: hidden;
}
.user-photo>image{
	width: 100%;
	height: 100%;
	display: block;
}
.user-info{
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-left: 20px;
	
}
.user-id{
	font-weight: bold;
	font-size: 32px;
	color: gray;
}
.user-nick-name{
	color: darkred;
}
.item-list{
	box-sizing: border-box;
	padding: 0px 20px;
	background-color: white;
	margin-top: 10px;
}
.item-list>.item{
	height: 80px;
	display: flex;
	flex-direction: row;
	align-items: center;	
}
.item-list>.item>.left{
	width: 100px;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.item-list>.item+.item{
	border-top: 1px solid lightgray;
}
.item-list>.item>.left>image{
	width: 50px;
	height: 50px;
}
.item-list>.item>.right{
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.item-hover-class{
	font-weight: bold;
}
</style>
